<template>
  <div class="indexPart">
    <el-container>
      <el-header style="height: 90px">
        <el-row :gutter="20" style="height: 90px;">
          <el-col :span="6">
            <div style="text-align: center;">
              <img style="height:90px" src="../../public/img/basketball.png" >
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
      </el-header>
      <el-main>
        <div style="height: 100px">
          <el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="setData">搜索</el-button>
        </div>
        <div style="text-align: left">
          <p style="font-size: 20px;font-family: Arial, Helvetica, sans-serif;">陈超词典</p>
          <hr style="border: 1px solid lightgray">
          <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane :label="item.theLebal" :name="item.theName" v-for="item in tabPaneData" :key="item.id">
              <el-table :data="tableData"
                        style="width: 90%;margin: 0 auto"
                        :row-style="{height: '60px'}"
                        :header-cell-style="{'font-size':'20px','font-family':'Arial Rounded MT Bold'}"
              >
                <el-table-column prop="information" label="" >
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="block"
             style="height: 100px"
        >
          <el-pagination
              :current-page="currentPage"
              :page-sizes="[8, 10, 12,16]"
              :page-size=pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>
      </el-main>
      <el-footer style="background-color: white;padding: 0">
        <div style="background-color: #E9EEF3;height: 200px;width: 100%">

        </div>
        <div style="background-color: #333333;height: 200px ;width: 100%">

        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      activeName:'first',
      currentPage:1,
      input:'',
      tableData:[{
        information:'勒布朗詹姆斯，NBA第一人',
        len:20
      },
      ],
      pageSize:8,
      total:24,
      tabPaneData:[
        {id:0,theLebal:'陈超词典0号',theName:'first'},{id:1,theLebal:'陈超词典0号',theName:'second'},
        {id:2,theLebal:'陈超词典0号',theName:'third'},{id:3,theLebal:'陈超词典0号',theName:'forth'}
      ]
    }
  },
  methods:{
    handleClick(tab,event){
      console.log(tab, event);
      console.log(tab.index)

    },
    setData(){
      this.tableData=[
        {
          information:'勒布朗詹姆斯，NBA第一人'
        },
        {
          information: '勒布朗詹姆斯，NBA历史第一小前锋'
        },
        {
          information: '勒布朗詹姆斯，NBA历史第一小前锋'
        },
        {
          information: '勒布朗詹姆斯，NBA历史第一小前锋'
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header, .el-footer {
  background-color: skyblue;
  color: #333;
  text-align: center;
  /*line-height: 90px;*/
  /*height: 90px;*/

}
.el-main {
  background-color: ghostwhite;
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
}
</style>
